<template>
  <div style="position: fixed; bottom: 0; left: 0;" class="full">
    <mu-bottom-nav color="teal" :value.sync="hnav">
      <mu-bottom-nav-item to="/" replace value="home" title="主页" icon="home"></mu-bottom-nav-item>
      <mu-bottom-nav-item to="/repairs" replace value="myrepairs" title="我的报修" icon="favorite"></mu-bottom-nav-item>
      <mu-bottom-nav-item to="/user" replace value="user" title="个人中心" icon="account_circle"></mu-bottom-nav-item>
    </mu-bottom-nav>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex'

  export default {
    name: "mnavigation",
    computed: {
      ...mapState(['nav']),
      hnav: {
        get () {
          return this.nav
        },
        set (v) {
          this.updateNav(v)
        }
      }
    },
    methods: {
      ...mapMutations(['updateNav'])
    }
  }
</script>

<style scoped>

</style>
